<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/white/common/common.jsp" %>
<%@include file="/white/common/taglibs.jsp" %>
<html>
<head>
    <script type="text/javascript" src="bigdata/js/jquery.min.js"></script>
    <script type="text/javascript" src="bigdata/js/echart/echarts.js"></script>
    <!-- jquery ui 使用的样式 -->
    <link rel="stylesheet" type="text/css" href="bigdata/js/jquery-ui/jquery-ui.min.css"/>
    <!-- jquery ui multiselect 使用的样式 -->
    <link rel="stylesheet" type="text/css" href="bigdata/js/jquery-ui/jquery.multiselect.css"/>

    <script type="text/javascript" src="bigdata/js/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="bigdata/js/jquery-ui/jquery.multiselect.min.js"></script>
    <style>
        #ask-ico {
            position: relative;
            display: inline-block;
        }

        #ask-ico .ask-con {
            position: absolute;
            background: #666C6C;
            border: 1px solid #ccc;
            left: 100%;
            top: 0;
            width: 300px;
            height: 200px;
            padding: 10px;
            display: none;
            color: #fff;
            font-size: 13px;
            font-weight: bold;
            overflow: scroll;
            overflow-x: auto;
        }

        #ask-ico:hover .ask-con {
            display: block;
        }

        .margin-bottom {
            font-size: 13px;
            font-weight: bold;
        }

        .highlight {
            font-size: 13px;
            color: #5DDCE2;
            font-weight: bold;
        }
    </style>
</head>
<body >
<s:form method="post" action="nspOnofflogTaRegionMonthEntityAction!queryByPage.action" theme="simple"
        id="searchForm">
    <div id="div_title">
        <h3>
                ${classDisplayName}浏览: 月用户分省统计
            <a id="ask-ico"> <img
                    src="img/q.png"/>

                <div class="ask-con">
                    <p class="margin-bottom">激活用户</p>

                    <p>
                        <span class="highlight">累计激活用户：</span>截止统计期末，有使用手机或PAD登陆过号码百事通客户端的累计用户数，以设备号（IMEI）去重；
                    </p>

                    <p>
                        <span class="highlight">新增激活用户：</span>统计周期内，首次使用手机或PAD登陆号码百事通客户端的用户数，去重；
                    </p>

                    <p class="margin-bottom">留存率</p>

                    <p>
                        <span class="highlight">次日留存率：</span>
                        （当天新增的用户中，在第2天还登录的用户数）/第一天激活总用户数
                    </p>

                    <p>
                        <span class="highlight">第3日留存率：</span>（当天新增的用户中，在第2天还登录的用户数）/第一天激活总用户数
                    </p>

                    <p>
                        <span class="highlight">第7日留存率：</span>（第一天激活的用户中，在往后的第7天还有登录的用户数）/第一天激活总用户数
                    </p>

                    <p>
                        <span class="highlight">第30日留存率：</span>（第一天激活的用户中，在往后的第30天还有登录的用户数）/第一天激活总用户数
                    </p>

                    <p class="margin-bottom">活跃用户</p>

                    <p>
                        <span class="highlight">日活跃用户：</span>统计当天，有使用手机或PAD登陆过号码百事通客户端的总用户数，去重；
                    </p>

                    <p>
                        <span class="highlight">日主动活跃：</span>统计当天，主动打开号码百事通客户端的总用户数，去重；
                    </p>

                    <p>
                        <span class="highlight">日被动活跃（来显）：</span>统计当天，首次弹出来电显示的号码百事通客户端的用户数，去重；
                    </p>

                    <p>
                        <span class="highlight">7日活跃用户：</span>以统计周期为基准，统计往前7天内（含当天）有使用手机或PAD登陆过号码百事通客户端的总用户数，去重；
                    </p>

                    <p>
                        <span class="highlight">30日活跃用户：</span>以自然月为统计周期，统计有使用手机或PAD登陆过号码百事通客户端的总用户数，去重；
                    </p>

                    <p class="margin-bottom">沉默用户</p>

                    <p>
                        <span class="highlight">沉默用户：</span>用户只在安装日（及安装次日启用），且在后续时间内无启动行为，则被认为是沉默用户。该指标可以反应出新增用户的质量以及应用的匹配度。
                    </p>
                </div>
            </a>
        </h3>

        <div id="div_search">
            <table>
                <tr>
                    <!-- 查询条件 -->
                    <td width="80" align="right">月份:</td>
                    <td><s:textfield size="8" maxlength="10" id="query_logDate"
                                     name="query_logDate" label="月份"
                                     onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyyMM', minDate:'1900-01',maxDate:''})">
                    </s:textfield> - <s:textfield size="8" maxlength="10" id="query_logDate_end"
                                                  name="query_logDate_end" label="月份"
                                                  onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyyMM', minDate:'1900-01',maxDate:''})">
                    </s:textfield></td>
                    <td width="80" align="right">地区名称:</td>
                    <td><select multiple="multiple" name="regionSelect" id="regionSelect">
                    </select>

                        <div id="loading" style="color:#DC2913">正在加载区域。。。</div>
                    </td>
                    <input type="hidden" value="${query_regionCode}" id="query_regionCode" name="query_regionCode"/>
                    <td width="80" align="right"><authz:authorize
                            ifAnyGranted="SMOOTH_ALL">
                        <s:submit cssClass="submit_search" value="搜索"
                                  action="nspOnofflogTaRegionMonthEntityAction!queryByPage"/>
                    </authz:authorize></td>
                    <td width="80" align="right">
                        <authz:authorize ifAnyGranted="OMC_PROD_GROUP">
                            <input type="button" cssClass="input_button" value="导出"
                                   onClick="excel();document.getElementById('searchForm').action= 'nspOnofflogTaRegionMonthEntityAction!queryByPage.action';"/>
                        </authz:authorize>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    </div>
    <!--列表 开始 -->
    <table cellpadding="0" cellspacing="0" class="t_list">
        <tr>
            <th colspan="3" style="BORDER: #DC2913 1px solid;"></th>
            <th colspan="2" style="BORDER: #DC2913 1px solid;">活跃用户</th>
            <th colspan="3" style="BORDER: #DC2913 1px solid;"></th>
        </tr>
        <tr>
            <!--列表头部 -->
            <th style="border-left: #DC2913 1px solid;">地区名称</th>
            <th>月份</th>
            <th>当月活跃用户数</th>
            <th style="border-left: #DC2913 1px solid;">主动活跃数</th>
            <th>被动活跃数</th>
            <th style="border-left: #DC2913 1px solid;">累计用户数</th>
            <th>新增用户数</th>
            <th style="border-right: #DC2913 1px solid;">最后更新时间</th>
        </tr>
        <s:iterator value="resultList" status="sindex">
            <tr>
                <td style="border-left: #DC2913 1px solid;"><s:property value="REGION_CODE"/></td>
                <td><s:property value="LOG_DATE"/></td>
                <td><s:property value="IMEI_MONTH_COUNT"/></td>
                <td style="border-left: #DC2913 1px solid;"><s:property value="ACTIVE_COUNT"/></td>
                <td><s:property value="PASSIVE_COUNT"/></td>
                <td style="border-left: #DC2913 1px solid;"><s:property value="IMEI_ALL_COUNT"/></td>
                <td><s:property value="IMEI_NEW_COUNT"/></td>
                <td style="border-right: #DC2913 1px solid;"><s:property value="LAST_UPDATE_TIME"/></td>
            </tr>
        </s:iterator>
    </table>
    <!--列表 结束 -->
    <!--分页 开始 -->
    <s:if test="resultList.size() > 0">
        <table border="0" cellspacing="0" cellpadding="0" class="t_bottom">
            <tr>
                <td>
                    <%@include file="/white/common/pageList.jsp" %>
                </td>
            </tr>
        </table>
    </s:if>
    <!--分页 结束 -->

</s:form>
<div id="main" style="width:100%;height: 250px;"></div>

<script type="text/javascript">


    function excel() {
        var searchForm = document.getElementById("searchForm");
        searchForm.action = 'nspOnofflogTaRegionMonthEntityAction!exportExcel.action';
        searchForm.submit();
    }

    $(function () {
        $("#regionSelect").hide();
        $.ajax({
            url: 'nspOnofflogTaRegionMonthEntityActionJson!queryChannel.action',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (data) {
                var options;
                $.each(data[0], function (n, v) {
                    options += '<option value="' + v + '">' + v + '</option>';
                });
                $("#regionSelect").append(options);
                $("#regionSelect").multiselect({
                    noneSelectedText: "==请选择区域==",
                    checkAllText: "全选",
                    uncheckAllText: '全不选',
                    selectedText:'# 已选'

                });
                $("#loading").hide();
            }
        });

    });

    $(":submit").click(function () {
        var beginday = $("#query_logDate").val();
        var endday = $("#query_logDate_end").val();
        if (beginday == "" || endday == "") {
            alert("选择起始和终止时间");
            return false;
        } else {
            var regions = $("#regionSelect").val()
            $("#query_regionCode").val(regions);
            $("#searchForm").submit();
        }
    });

    require.config({
        paths: {
            echarts: 'bigdata/js/echart'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main')).showLoading({effect: 'bubble'});
                myChart.hideLoading();

                var beginday = $("#query_logDate").val();
                var endday = $("#query_logDate_end").val();
                if (beginday != "" && endday != "") {
                    var regionList = [];
                    var imeiNewCountList = [];
                    myChart.showLoading();
                    $.ajax({
                        url: 'nspOnofflogTaRegionMonthEntityActionJson!getChart.action',
                        dataType: 'json',
                        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                        data: encodeURI(encodeURI(decodeURIComponent($('#searchForm').serialize(), true))),
                        success: function (data) {
                            if (data != null) {
                                myChart.setOption(data);
                            }
                            myChart.hideLoading();
                        }

                    });
                }

            }
    );
</script>
</body>
</html>
